<template>
  <div>
    <span style="font-size: 30px;">深加工信息</span>&nbsp;
     <el-button style="width: 90px;height: 40px;font-size: 15px;" @click="Sets">设置</el-button>
     <br>
     <el-container>
        <el-aside ><br>
          班组：<span style="font-weight: bold;">{{ form.processingClass }} 
          </span> <br><br>
        </el-aside>
        <el-main>
          负责人：<span style="font-weight: bold;">{{ form.processingName }}
          </span> <br><br>
        </el-main>      
     </el-container>
  </div>
  <!-- 屠宰 -->
  <el-dialog v-model="dialogForm" title="深加工信息" width="566">
    <el-form :model="form" label-width="auto">
      <el-form-item label="班组：">
        <el-input v-model="form.processingClass" />
      </el-form-item>
      <el-form-item label="负责人：">
        <el-input v-model="form.processingName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="Create(form.processingId)" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 食品图 -->
  <div>
    <span style="font-size: 30px;">食品安全信息</span>&nbsp;
    <el-upload
      class="avatar-uploader"
      v-model:file-list="form.SImge"
      action="http://localhost:55799/api/Trace/UpdateFile"
      list-type="picture-card"
      :on-success="AddD"
      :on-remove="handleRemove">
      <el-icon><Plus /></el-icon>
    </el-upload>    
  </div><br>
  <!-- 供应商信息 -->
   <div>
    <span style="font-size: 30px;color: blue;">供应商信息</span>&nbsp;<br>
      <span style="font-size: 20px;font-weight: bold;">原料</span>&nbsp;
      <el-button style="width: 80px;height: 30px;font-size: 15px;" @click="YSets">设置</el-button>
      <el-container>
        <el-aside ><br>
          生产批次：<span style="font-weight: bold;">{{ form.processingClass }} 
          </span> <br><br>
        </el-aside>
      </el-container>
      <!-- 原料 -->
      <el-dialog v-model="feedstock" title="供应商信息-原料" width="566">
        <el-form :model="form" label-width="auto">
          <el-form-item label="生产批次：">
            <el-input v-model="form.processingName" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="Create(form.processingId)" type="primary">保存</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 原料图 -->
      <span style="font-size: 20px;font-weight: bold;">相关材料</span>&nbsp;
        <el-upload
          class="avatar-uploader"
          v-model:file-list="form.SImge"
          action="http://localhost:55799/api/Trace/UpdateFile"
          list-type="picture-card"
          :on-success="AddD"
          :on-remove="handleRemove">
          <el-icon><Plus /></el-icon>
        </el-upload>
      <!-- 辅料 -->
      <span style="font-size: 20px;font-weight: bold;">辅料</span>&nbsp;
      <el-button style="width: 80px;height: 30px;font-size: 15px;" @click="FSets">设置</el-button>
      <el-container>
        <el-aside ><br>
          生产批次：<span style="font-weight: bold;">{{ form.processingClass }} 
          </span> <br><br>
        </el-aside>
      </el-container>
      <!-- 辅料添加 -->
      <el-dialog v-model="fuku" title="供应商信息-辅料" width="566">
        <el-form :model="form" label-width="auto">
          <el-form-item label="生产批次：">
            <el-input v-model="form.processingName" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="Create(form.processingId)" type="primary">保存</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 辅料图 -->
      <span style="font-size: 20px;font-weight: bold;">相关材料</span>&nbsp;
      <el-upload
        class="avatar-uploader"
        v-model:file-list="form.SImge"
        action="http://localhost:55799/api/Trace/UpdateFile"
        list-type="picture-card"
        :on-success="AddD"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <!-- 添加剂 -->
      <span style="font-size: 20px;font-weight: bold;">添加剂</span>&nbsp;
      <el-button style="width: 80px;height: 30px;font-size: 15px;" @click="TSets">设置</el-button>
      <el-container>
        <el-aside ><br>
          生产批次：<span style="font-weight: bold;">{{ form.processingClass }} 
          </span> <br><br>
        </el-aside>
      </el-container>
      <!-- 添加剂添加 -->
      <el-dialog v-model="additive" title="供应商信息-添加剂" width="566">
        <el-form :model="form" label-width="auto">
          <el-form-item label="生产批次：">
            <el-input v-model="form.processingName" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="Create(form.processingId)" type="primary">保存</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 添加剂图 -->
      <span style="font-size: 20px;font-weight: bold;">相关材料</span>&nbsp;
      <el-upload
        class="avatar-uploader"
        v-model:file-list="form.SImge"
        action="http://localhost:55799/api/Trace/UpdateFile"
        list-type="picture-card"
        :on-success="AddD"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>

      <!-- 包材 -->

      <span style="font-size: 20px;font-weight: bold;">包材</span>&nbsp;
      <el-button style="width: 80px;height: 30px;font-size: 15px;" @click="BSets">设置</el-button>
      <el-container>
        <el-aside ><br>
          生产批次：<span style="font-weight: bold;">{{ form.processingClass }} 
          </span> <br><br>
        </el-aside>
      </el-container>
      <!-- 添加剂添加 -->
      <el-dialog v-model="Packaging" title="供应商信息-包材" width="566">
        <el-form :model="form" label-width="auto">
          <el-form-item label="生产批次：">
            <el-input v-model="form.processingName" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="Create(form.processingId)" type="primary">保存</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 添加剂图 -->
      <span style="font-size: 20px;font-weight: bold;">相关材料</span>&nbsp;
      <el-upload
        class="avatar-uploader"
        v-model:file-list="form.SImge"
        action="http://localhost:55799/api/Trace/UpdateFile"
        list-type="picture-card"
        :on-success="AddD"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>      
    </div><br>
    <!-- 企业信息 -->
   <div>
    <span style="font-size: 30px;">企业信息</span>&nbsp;
     <el-button style="width: 90px;height: 40px;font-size: 15px;" @click="Setup">设置</el-button>
     <br>
     <el-container>
        <el-aside ><br>
          公司名称：<span style="font-weight: bold;">{{ business.companyName }} 
          </span>
        </el-aside>
        <el-main>
          生产许可证号：<span style="font-weight: bold;">{{ business.businessHeard }} 
          </span>
        </el-main>
     </el-container>
   </div>
   <!-- 企业信息 -->
   <el-dialog v-model="Enterprise" title="企业信息" width="566">
    <el-form :model="form" label-width="auto">
      <el-form-item label="公司名称：">
        <el-input v-model="business.companyName" />
      </el-form-item>
      <el-form-item label="生产许可证号：">
        <el-input v-model="business.businessHeard" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="QCreate(business.businessId)" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog><br>
  <!-- 企业照片 -->
  <div>
    <span style="font-size: 28px;">企业照片</span>&nbsp;
    <el-upload
      class="avatar-uploader"
      v-model:file-list="business.ImageQ"
      action="http://localhost:55799/api/Trace/UpdateFile"
      list-type="picture-card"
      :on-success="AddQ"
      :on-remove="handleRemove">
      <el-icon><Plus /></el-icon>
    </el-upload>    
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
const route=useRoute()
//屠宰字段
const form=reactive({
  //溯源Id
  traceabilityId:route.query.traceabilityId,
  processingId:'0',
  processingClass:'',
  processingName:'',
  SImge:[]
})
//深加工弹框
const dialogForm = ref(false)
const Sets=()=>{
  dialogForm.value=true
  console.log(form);
}

//钩子
onMounted(()=>{
  //深加工
  Create(form)
  //企业
  QCreate(business)
})
//深加工添加/反填    食品图详情
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Create=(row:any)=>{
  if(row==0){
    axios.post(`Trace/Addprocessing`,form).then((ret) => {
      console.log(ret.data)
      if(ret.data>0){
        ElMessage.success('深加工添加成功')
        dialogForm.value=false
      }else{
        ElMessage.error('深加工添加失败')
      }
    })
  }else{
    axios.get('Trace/Getprocessing', {
      params: {
        id:form.traceabilityId
      }
    }).then((ret) => {
      console.log(ret.data)
      form.processingId=ret.data[0].processingId
      form.processingClass=ret.data[0].processingClass
      form.processingName=ret.data[0].processingName
      //食品图详情
      SBackImge()
    })
  }
}
//图片
import { Plus } from '@element-plus/icons-vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleRemove= (uploadFile:any) => {
  console.log(uploadFile)
}
//食品图添加
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const AddD=(SImge:any)=>{
  SImge='http://localhost:55799/Imge/'+SImge
  form.SImge=SImge
  console.log(form);
  axios.post(`Trace/AddPhoto`,{
    photoImge:form.SImge,
    processingId:form.processingId
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('食品图添加成功')
    }else{
      ElMessage.error('食品图添加失败')
    }
  })
}
//食品图详情
const SBackImge=()=>{
  axios.get('Trace/GetSPhoto', {
    params: {
      id:form.processingId
    }
  }).then((ret) => {
    console.log(ret.data)
    form.SImge = ret.data
  })
}
//原料
const feedstock=ref(false)
const YSets=()=>{
  feedstock.value=true
}
//辅料
const fuku=ref(false)
const FSets=()=>{
  fuku.value=true
}
//添加剂
const additive=ref(false)
const TSets=()=>{
  additive.value=true
}
//包材
const Packaging=ref(false)
const BSets=()=>{
  Packaging.value=true
}


//企业字段
const business=reactive({
  businessId:'',
  companyName:'',
  businessHeard:'',
  //溯源Id
  traceabilityId:route.query.traceabilityId,
  ImageQ:[]
})
const Enterprise=ref(false)
//企业设置
const Setup=()=>{
  Enterprise.value=true
  console.log(business);
}
//企业添加/显示
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const QCreate=(row:any)=>{
  if(row==0){
    axios.post(`Trace/UpdateBusiness`,{
      businessId:localStorage.getItem('businessId'),
      companyName:business.companyName,
      businessHeard:business.businessHeard,
    }).then((ret) => {
      console.log(ret.data)
      if(ret.data>0){
        ElMessage.success('添加成功')
        Enterprise.value=false
      }else{
        ElMessage.error('添加失败')
      }
    })
  }else{
    axios.get('Trace/GetBusiness', {
      params: {
        id:business.traceabilityId
      }
    }).then((ret) => {
      console.log(ret.data)
      business.businessId=ret.data[0].businessId
      business.companyName=ret.data[0].companyName
      business.businessHeard=ret.data[0].businessHeard
      //企业图片详情
      QBackImge()
    })
  }
}
//企业照片
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const AddQ=(ImageQ:any)=>{
  ImageQ='http://localhost:55799/Imge/'+ImageQ
  business.ImageQ=ImageQ
  axios.post(`Trace/AddPhoto`,{
    photoImge:business.ImageQ,
    businessId:business.businessId
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('企业照片添加成功')
    }else{
      ElMessage.error('企业照片添加失败')
    }
  })
}
//企业图片详情
const QBackImge=()=>{
  axios.get('Trace/GetQPhoto', {
    params: {
      id:business.businessId
    }
  }).then((ret) => {
    console.log(ret.data)
    business.ImageQ = ret.data
  })
}
</script>

<style scoped>

</style>